<?php
/**
 * Created by PhpStorm.
 * User: wodrow
 * Date: 2018/9/30
 * Time: 10:21
 */

/**
 * @var \yii\web\View $this
 * @var \common\models\db\User $user
 */

use common\components\tools\Html;

$this->title = $user->profileName . "--主页";
$this->params['breadclumbs'][] = $this->title;

$css = <<<CSS
#header-user-profile{
	border:1px solid #ddd;
	margin-bottom:20px;
	}
#header-user-profile .navbar{
	border-radius:0;
	margin-bottom:0;
	border:none;
        font-family: 'Open Sans Condensed', sans-serif, sans-serif;

	}
	
#header-user-profile .navbar-brand{
width:160px;
height:160px;
float:left;
padding:0;
margin-top:-130px;
overflow:hidden;
border:3px solid #eee;
margin-left:15px;
background:#333;
text-align:center;
line-height:160px;
color:#fff !important;
font-size:2em;
    -webkit-transition:  all 0.3s ease-in-out;
  	-moz-transition: all 0.3s ease-in-out;
  	-o-transition:  all 0.3s ease-in-out;
  	transition: all 0.3s ease-in-out ;

	}
	
	
#header-user-profile .site-name{
	color:#fff;
	font-size:2.4em;
	float:left;
	margin-top:-65px !important;
	margin-left:15px;
        font-family: 'Open Sans Condensed', sans-serif, sans-serif;

	}	
#header-user-profile .site-description{
	color:#fff;
	font-size:1.3em;
	float:left;
	margin-top:-30px !important;
	margin-left:15px;
	}
	
#header-user-profile .main-menu{
	position:absolute;
	left:190px;
	}
	
#header-user-profile .slider, #header-user-profile .carousel{
	max-height:360px;
	overflow:hidden;
	}
	
#header-user-profile .carousel-control .fa-angle-left,
#header-user-profile .carousel-control .fa-angle-right {
position: absolute;
top: 50%;
font-size:2em;
z-index: 5;
display: inline-block;
}

#header-user-profile .carousel-control{
	background-color:transparent;
	background-image:none !important;
	}
	
#header-user-profile .carousel-control:hover,
#header-user-profile .carousel-control:focus {
  color: #fff;
  text-decoration: none;
  background-color:transparent !important;
  background-image:none !important;
  outline: 0;
}

@media (max-width: 768px) {
#header-user-profile .navbar-brand{
    max-width: 100px;
	max-height:100px;
	float:left;
	margin-top:-65px;
	margin-left:15px;
	-webkit-transition:  all 0.3s ease-in-out;
  	-moz-transition: all 0.3s ease-in-out;
  	-o-transition:  all 0.3s ease-in-out;
  	transition: all 0.3s ease-in-out ;
  }
  

#header-user-profile .navbar{
	border-radius:0;
	margin-bottom:0;
	border:none;
	}
	
#header-user-profile .main-menu{
	left:0;
	position:relative;
	}
}

@media (max-width: 490px) {
	.site-name{
	color:#fff;
	font-size:1.5em;
	float:left;
	line-height:20px;
	margin-top:-100px !important;
	margin-left:125px;
}	
#header-user-profile .site-description{
	color:#fff;
	font-size:1.3em;
	float:left;
	margin-top:-80px !important;
	margin-left:125px;
	}
}

CSS;
$this->registerCss($css);
?>

<?php $this->beginBlock('page-header'); ?>
<div class="container">
    <header id="header-user-profile">

        <div class="slider">
            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                <!-- Wrapper for slides -->
                <div class="carousel-inner" role="listbox">
                    <div class="item active">
                        <img src="http://placehold.it/1200x400/F34336/F34336&text=WORDPRESS THEME DEVELOPER">
                    </div>
                    <div class="item">
                        <img src="http://placehold.it/1200x400/20BFA9/ffffff&text=CLEAN %26 SMART">
                    </div>
                </div>

                <!-- Controls -->
                <a class="left carousel-control" href="#carousel-example-generic" role="button"
                   data-slide="prev">
                    <span class="fa fa-angle-left" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#carousel-example-generic" role="button"
                   data-slide="next">
                    <span class="fa fa-angle-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div><!--slider-->
        <nav class="navbar navbar-default">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">

                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#mainNav">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">
                    <?=$user->getAvatarImg(160, 160) ?>
                </a>
                <span class="site-name"><b>Roland</b> Maruntelu</span>
                <span class="site-description">worpress theme developer</span>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="mainNav">
                <ul class="nav main-menu navbar-nav">
                    <li><a href="#"><i class="fa fa-home"></i> HOME</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                </ul>

                <ul class="nav  navbar-nav navbar-right">
                    <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                    <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                    <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </nav>

    </header><!--/#HEADER-->
</div>
<?php $this->endBlock(); ?>

<div class="home-user-profile-index">
    <div class="row">
        <div class="col-sm-3"><!--left col-->
            <div class="panel panel-default hidden-md hidden-sm">
                <?=$this->render('@home/members/wodrow/profile_box/views/box.php', ['user' => $user]) ?>
            </div>

            <ul class="list-group">
                <li class="list-group-item text-muted">信息</li>
                <li class="list-group-item text-right"><span
                            class="pull-left"><strong>加入时间</strong></span> <?= date("Y-m-d H:i") ?></li>
                <li class="list-group-item text-right"><span
                            class="pull-left"><strong>Last seen</strong></span> Yesterday
                </li>
                <li class="list-group-item text-right"><span
                            class="pull-left"><strong>昵称</strong></span> <?= $user->nickname ? $user->nickname : "暂无" ?>
                </li>
            </ul>

            <div class="panel panel-default">
                <div class="panel-heading">Website <i class="fa fa-link fa-1x"></i></div>
                <div class="panel-body"><a href="http://bootnipets.com">bootnipets.com</a></div>
            </div>


            <ul class="list-group">
                <li class="list-group-item text-muted">Activity <i class="fa fa-dashboard fa-1x"></i>
                </li>
                <li class="list-group-item text-right"><span
                            class="pull-left"><strong>Shares</strong></span> 125
                </li>
                <li class="list-group-item text-right"><span
                            class="pull-left"><strong>Likes</strong></span> 13
                </li>
                <li class="list-group-item text-right"><span
                            class="pull-left"><strong>Posts</strong></span> 37
                </li>
                <li class="list-group-item text-right"><span
                            class="pull-left"><strong>Followers</strong></span> 78
                </li>
            </ul>

            <div class="panel panel-default">
                <div class="panel-heading">Social Media</div>
                <div class="panel-body">
                    <i class="fa fa-facebook fa-2x"></i> <i class="fa fa-github fa-2x"></i> <i
                            class="fa fa-twitter fa-2x"></i> <i class="fa fa-pinterest fa-2x"></i> <i
                            class="fa fa-google-plus fa-2x"></i>
                </div>
            </div>

        </div><!--/col-3-->
        <div class="col-sm-9">

            <ul class="nav nav-tabs" id="myTab">
                <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
                <li><a href="#messages" data-toggle="tab">Messages</a></li>
                <li><a href="#settings" data-toggle="tab">Settings</a></li>
            </ul>

            <div class="tab-content">
                <div class="tab-pane active" id="home">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                            <tr>
                                <th>#</th>
                                <th>Label 1</th>
                                <th>Label 2</th>
                                <th>Label 3</th>
                                <th>Label</th>
                                <th>Label</th>
                                <th>Label</th>
                            </tr>
                            </thead>
                            <tbody id="items">
                            <tr>
                                <td>1</td>
                                <td>Table cell</td>
                                <td>Table cell</td>
                                <td>Table cell</td>
                                <td>Table cell</td>
                                <td>Table cell</td>
                                <td>Table cell</td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>Table cell</td>
                                <td>Table cell</td>
                                <td>Table cell</td>
                                <td>Table cell</td>
                                <td>Table cell</td>
                                <td>Table cell</td>
                            </tr>
                            <tr>
                                <td>3</td>
                                <td>Table cell</td>
                                <td>Table cell</td>
                                <td>Table cell</td>
                                <td>Table cell</td>
                                <td>Table cell</td>
                                <td>Table cell</td>
                            </tr>
                            <tr>
                                <td>4</td>
                                <td>Table cell</td>
                                <td>Table cell</td>
                                <td>Table cell</td>
                                <td>Table cell</td>
                                <td>Table cell</td>
                                <td>Table cell</td>
                            </tr>
                            <tr>
                                <td>5</td>
                                <td>Table cell</td>
                                <td>Table cell</td>
                                <td>Table cell</td>
                                <td>Table cell</td>
                                <td>Table cell</td>
                                <td>Table cell</td>
                            </tr>
                            <tr>
                                <td>6</td>
                                <td>Table cell</td>
                                <td>Table cell</td>
                                <td>Table cell</td>
                                <td>Table cell</td>
                                <td>Table cell</td>
                                <td>Table cell</td>
                            </tr>
                            <tr>
                                <td>7</td>
                                <td>Table cell</td>
                                <td>Table cell</td>
                                <td>Table cell</td>
                                <td>Table cell</td>
                                <td>Table cell</td>
                                <td>Table cell</td>
                            </tr>
                            <tr>
                                <td>8</td>
                                <td>Table cell</td>
                                <td>Table cell</td>
                                <td>Table cell</td>
                                <td>Table cell</td>
                                <td>Table cell</td>
                                <td>Table cell</td>
                            </tr>
                            <tr>
                                <td>9</td>
                                <td>Table cell</td>
                                <td>Table cell</td>
                                <td>Table cell</td>
                                <td>Table cell</td>
                                <td>Table cell</td>
                                <td>Table cell</td>
                            </tr>
                            <tr>
                                <td>10</td>
                                <td>Table cell</td>
                                <td>Table cell</td>
                                <td>Table cell</td>
                                <td>Table cell</td>
                                <td>Table cell</td>
                                <td>Table cell</td>
                            </tr>
                            </tbody>
                        </table>
                        <hr>
                        <div class="row">
                            <div class="col-md-4 col-md-offset-4 text-center">
                                <ul class="pagination" id="myPager"></ul>
                            </div>
                        </div>
                    </div><!--/table-resp-->

                    <hr>

                </div><!--/tab-pane-->
                <div class="tab-pane" id="messages">

                    <h2></h2>

                    <ul class="list-group">
                        <li class="list-group-item text-muted">Inbox</li>
                        <li class="list-group-item text-right"><a href="#" class="pull-left">Here is
                                your a link to the latest summary report from the..</a> 2.13.2014
                        </li>
                        <li class="list-group-item text-right"><a href="#" class="pull-left">Hi Joe,
                                There has been a request on your account since that was..</a> 2.11.2014
                        </li>
                        <li class="list-group-item text-right"><a href="#" class="pull-left">Nullam
                                sapien massaortor. A lobortis vitae, condimentum justo...</a> 2.11.2014
                        </li>
                        <li class="list-group-item text-right"><a href="#" class="pull-left">Thllam
                                sapien massaortor. A lobortis vitae, condimentum justo...</a> 2.11.2014
                        </li>
                        <li class="list-group-item text-right"><a href="#" class="pull-left">Wesm sapien
                                massaortor. A lobortis vitae, condimentum justo...</a> 2.11.2014
                        </li>
                        <li class="list-group-item text-right"><a href="#" class="pull-left">For
                                therepien massaortor. A lobortis vitae, condimentum justo...</a>
                            2.11.2014
                        </li>
                        <li class="list-group-item text-right"><a href="#" class="pull-left">Also we,
                                havesapien massaortor. A lobortis vitae, condimentum justo...</a>
                            2.11.2014
                        </li>
                        <li class="list-group-item text-right"><a href="#" class="pull-left">Swedish
                                chef is assaortor. A lobortis vitae, condimentum justo...</a> 2.11.2014
                        </li>

                    </ul>

                </div><!--/tab-pane-->
                <div class="tab-pane" id="settings">


                    <hr>
                    <form class="form" action="##" method="post" id="registrationForm">
                        <div class="form-group">

                            <div class="col-xs-6">
                                <label for="first_name"><h4>First name</h4></label>
                                <input type="text" class="form-control" name="first_name"
                                       id="first_name" placeholder="first name"
                                       title="enter your first name if any.">
                            </div>
                        </div>
                        <div class="form-group">

                            <div class="col-xs-6">
                                <label for="last_name"><h4>Last name</h4></label>
                                <input type="text" class="form-control" name="last_name" id="last_name"
                                       placeholder="last name" title="enter your last name if any.">
                            </div>
                        </div>

                        <div class="form-group">

                            <div class="col-xs-6">
                                <label for="phone"><h4>Phone</h4></label>
                                <input type="text" class="form-control" name="phone" id="phone"
                                       placeholder="enter phone"
                                       title="enter your phone number if any.">
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-xs-6">
                                <label for="mobile"><h4>Mobile</h4></label>
                                <input type="text" class="form-control" name="mobile" id="mobile"
                                       placeholder="enter mobile number"
                                       title="enter your mobile number if any.">
                            </div>
                        </div>
                        <div class="form-group">

                            <div class="col-xs-6">
                                <label for="email"><h4>Email</h4></label>
                                <input type="email" class="form-control" name="email" id="email"
                                       placeholder="you@email.com" title="enter your email.">
                            </div>
                        </div>
                        <div class="form-group">

                            <div class="col-xs-6">
                                <label for="email"><h4>Location</h4></label>
                                <input type="email" class="form-control" id="location"
                                       placeholder="somewhere" title="enter a location">
                            </div>
                        </div>
                        <div class="form-group">

                            <div class="col-xs-6">
                                <label for="password"><h4>Password</h4></label>
                                <input type="password" class="form-control" name="password"
                                       id="password" placeholder="password"
                                       title="enter your password.">
                            </div>
                        </div>
                        <div class="form-group">

                            <div class="col-xs-6">
                                <label for="password2"><h4>Verify</h4></label>
                                <input type="password" class="form-control" name="password2"
                                       id="password2" placeholder="password2"
                                       title="enter your password2.">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-xs-12">
                                <br>
                                <button class="btn btn-lg btn-success" type="submit"><i
                                            class="glyphicon glyphicon-ok-sign"></i> Save
                                </button>
                                <button class="btn btn-lg" type="reset"><i
                                            class="glyphicon glyphicon-repeat"></i> Reset
                                </button>
                            </div>
                        </div>
                    </form>
                </div>

            </div><!--/tab-pane-->
        </div><!--/tab-content-->

    </div><!--/col-9-->
</div>
